<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box{width:800px;height: 220px;margin: 0 auto;position: relative;}

    .box .imgbox img{width: 800px;height: 220px;display: none;}
    
    .box .btns input{position: absolute;width: 30px;height: 30px;top: 95px;}
    .box .btns .left{left:0}
    .box .btns .right{right:0}
  </style>
</head>
<body>
  <div class="box">
    <div class="imgbox">
      <img src="./imgs/banner1.jpg" alt="">
      <img src="./imgs/banner2.jpg" alt="">
      <img src="./imgs/banner3.jpg" alt="">
      <img src="./imgs/banner4.jpg" alt="">
      <img src="./imgs/banner5.jpg" alt="">
    </div>
    <div class="btns">
      <input type="button" value="左" class="left">
      <input type="button" value="右" class="right">
    </div>
  </div>
</body>
<script>

  var left = document.querySelector(".left");
  var right = document.querySelector(".right");
  var imgs = document.querySelectorAll(".imgbox img");

  // 1. 默认索引
  var index = 2;
  // 2. 根据默认索引显示图片
  imgs[index].style.display = "block";

  // 3. 左按钮事件
  left.onclick = function(){
    // 4. 切换索引之前，先隐藏现在显示的图片
    imgs[index].style.display = "none";
    // 5. 切换索引：
    // 5-1. 判断索引是否到临界值
    if(index === 0){
      // 5-2. 到临界值了设置为初始值
      index = imgs.length-1;
    }else{
      // 5-3. 没有到临界值，索引减1
      index--;
    }
    // 6. 切换索引之后，显示新索引对应的图片
    imgs[index].style.display = "block";
  }

  right.onclick = function(){
    imgs[index].style.display = "none";
    if(index === imgs.length-1){
      index = 0;
    }else{
      index++;
    }
    imgs[index].style.display = "block";
  }
  
</script>
</html>